<template>
  <!-- 放置一个图标 -->
  <div class="screenWrapper">
    <svg-icon
      :icon-class="isFull ? 'exit-fullscreen' : 'fullscreen'"
      class="fullscreen"
      @click="toggleScreen"
    />
  </div>
</template>

<script>
// document.documentElement.requestFullscreen()：开启全屏
// document.exitFullscreen()：退出全屏
import screenfull from 'screenfull'
export default {
  name: 'ScreenFull',
  data(){
    return{
      //是否全屏的状态，false代表非全屏状态
      isFull:false
    }
  },
  methods:{
    toggleScreen(){
      if(this.isFull){
        // document.exitFullscreen()
        screenfull.exit()
      }else{
        //当前不是全屏状态，点击后，开启全屏
        // document.documentElement.requestFullscreen()
        screenfull.request()
      }
      this.isFull = !this.isFull
    }
  },
  mounted() {
    // 监听全屏状态变化
    screenfull.on('change', () => {
      // 让 isFull，跟当前浏览器的全屏状态保持一致
      this.isFull = !!document.fullscreenElement
      this.isFull = screenfull.isFullscreen
    })
  }
}
</script>

<style lang="scss" scoped>
.screenWrapper {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.fullscreen {
  width: 20px;
  height: 20px;
  color: #fff;
  cursor: pointer;
}
</style>
